<!--
  @Author cj
  @Date: 2020/10/28/ 10:32
-->
<template>
  <div style="width: 100%;height: 100%;">
    <div style="background:#fff;height:100%">
      <div class="waveWrapper waveAnimation"
           :style="{'background-image':`url(${login_bg})`,'background-size':' 100% 100%'}">
        <div class="license-logo-box">
          <img :src="logo2">
          <span>SmartOne</span>
          <!-- <span>FutureCell</span> -->
        </div>


        <div class="sp-license-box">
          <!-- 激活许可证 -->
          <!--<div class="license-title">
            {{$t('common.licenseActive')}}
            <el-radio-group v-model="isCollapse" size="mini" style="float:right;">
              &lt;!&ndash; 秘钥激活 &ndash;&gt;
              <el-radio-button :label="1">{{$t('common.keyActive')}}</el-radio-button>
              &lt;!&ndash; 二维码激活 &ndash;&gt;
              <el-radio-button :label="2">{{$t('common.QrCodeActive')}}</el-radio-button>
            </el-radio-group>
          </div>-->
          <el-tabs v-model="isCollapse" >
            <el-tab-pane :label="$t('common.keyActive')" name="1"></el-tab-pane>
            <el-tab-pane :label="$t('common.QrCodeActive')" v-if="queryKey" name="2"></el-tab-pane>
          </el-tabs>
          <div v-if="isCollapse==='1'" class="licenseKeyBox">
            <!-- 许可秘钥 -->
            <!--<span class="span-label">{{$t('common.licenseKey')}}</span>-->
            <!-- 请输入 -->
            <el-input class="license-key" size="small" v-model="licenseKey" :placeholder="$t('common.pleaseEnter')+$t('common.licenseKey')"></el-input>
            <div class="license-btn-box">
              <!-- 确认激活 -->
              <el-button type="primary" size="small" class="license-btn" @click="activeLicense">{{$t('common.confirmActive')}}</el-button>
            </div>
          </div>
          <div class="qrcodeBox" v-show="isCollapse==='2'">
            <div id="qrcode"></div>
            <!-- 请扫一扫二维码，激活许可证 -->
            <span>{{$t('common.qrTip')}}</span>
          </div>
        </div>

        <div class="waveWrapperInner bgTop">
          <div class="wave waveTop"
               :style="{'background-image': `url(${wave_top})`,'opacity':0.3}"></div>
        </div>
        <div class="waveWrapperInner bgMiddle">
          <div class="wave waveMiddle"
               :style="{'background-image': `url(${wave_mid})`,'opacity':0.5}"></div>
        </div>
        <div class="waveWrapperInner bgBottom">
          <div class="wave waveBottom"
               :style="{'background-image': `url(${wave_bot})`,'opacity':0.7}"></div>
        </div>
        <div class="login-bottom">
          <span>©{{$t('login.loginBottom')}}</span>
          <!-- <span>©四川赋智赛尔生物技术有限责任公司 FutureCell® 2019 All rights reserved.</span> -->
        </div>
      </div>

    </div>

    <!--<div class="sp-logo-box">
      <Logo></Logo>
    </div>-->
  </div>
</template>

<script>
  import Logo from '../index/logo'
  import QRCode from 'qrcodejs2'
  import login_bg from '../../assets/img/login_bg.png'
  import logo2 from '../../assets/img/logo2.png'
  import wave_top from '../../assets/img/wave-top.png'
  import wave_mid from '../../assets/img/wave-top.png'
  import wave_bot from '../../assets/img/wave-top.png'

  export default {
    name: "licenseActive",
    components:{
      Logo
    },
    data(){
      return {
        isCollapse: '1',
        licenseKey:'',
        queryKey:'',
        login_bg,
        logo2,
        wave_top,
        wave_mid,
        wave_bot
      }
    },
    mounted(){
      if (this.$route.query.licenseKey) {
        // 获取许可秘钥
        let Base64 = require('js-base64').Base64
        this.queryKey = Base64.decode(this.$route.query.licenseKey)

        // 生成二维码
        new QRCode('qrcode', {
          text: location.href.replace('licenseActive', 'appLicenseActive'), // 链接（必填）
          width: 200, // 宽（默认256px）
          height: 200, // 高（默认256px）
          colorLight: '#F1F1F1', // 背景色
          colorDark: '#333', // 前景色
          correctLevel: QRCode.CorrectLevel.L // 二维码可辨识度（L,M,Q,H）
        })

        // 校验许可证是否激活
        let licenseInterval = setInterval(() => {
          this.$store.dispatch('CheckActivate', this.queryKey).then((res) => {
            if (res.data.meta.success && res.data.data.isActivated === 1) {
              clearInterval(licenseInterval)
              // 操作成功- 已激活
              this.$message.success(this.$t('common.activeSuccess'));
              this.$router.push({path: '/login'})
            }
          })
        }, 2000)
      }
    },
    methods:{
      activeLicense(){
        if(!this.licenseKey){
          this.$message.warning(this.$t('common.pleaseEnter')+this.$t('common.licenseKey'));
          return false;
        }
        this.$store.dispatch('LicenseActivate',this.licenseKey).then((res) => {
          if(res.data.meta.success){
            // 操作成功
            this.$message.success(this.$t('common.success'));
            this.$router.push({ path: '/login' })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sp-logo-box{
    width: 100%;
    height: 65px;
    background-color: #1E90FF;
  }
  .avue-logo {
    background-color: #1E90FF;

  }
  .sp-license-box{
    position: absolute;
    z-index: 99;
    width: 500px;
    /*margin: 200px auto;*/
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px;
    font-size: 14px;
    font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
    .license-title{
      font-size: 16px;
      font-weight: bolder;
      padding-bottom: 20px;
      margin-bottom: 40px;
      border-bottom: 1px solid #ddd;
    }
    .span-label{
      display: inline-block;
      width: 80px;
      text-align: right;
      padding-right: 10px;
    }
    .license-key{
      width: 360px;
      font-size: 12px;
    }
    .license-btn-box{
      margin: 40px 0;
      text-align: center;
      .license-btn{
        width: 260px;
        height: 32px;
        line-height: 30px;
        padding: 0;
      }
    }
  }
  .licenseKeyBox{
    text-align: center;
    margin-top: 30px;
  }
  .qrcodeBox{
    margin-bottom: 20px;
    text-align: center;
    margin-top: 30px;
    #qrcode{
      width: 200px;
      margin: auto;
    }
    text-align: center;
    span{
      color: #999;
      font-size: 12px;
      line-height: 30px;
    }
  }
  /* 背景及动效 */
  @keyframes move_wave {
    0% {
      transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
      transform: translateX(-25%) translateZ(0) scaleY(0.55);
    }
    100% {
      transform: translateX(-50%) translateZ(0) scaleY(1);
    }
  }
  .license-logo-box{
    position: absolute;
    width: 100%;
    height: 60px;
    line-height: 60px;
    top: 0;
    left: 0;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 0 230px;
    font-size: 20px;
    color: #008eff;
    span {
      margin-left: 5px;
    }
  }
  .waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
  }
  .waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
  }
  .bgTop {
    z-index: 15;
    opacity: 0.5;
  }
  .bgMiddle {
    z-index: 10;
    opacity: 0.75;
  }
  .bgBottom {
    z-index: 5;
  }
  .wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
  }
  .waveTop {
    background-size: 50% 100px;
  }
  .waveAnimation .waveTop {
    animation: move-wave 3s;
    -webkit-animation: move-wave 3s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .waveMiddle {
    background-size: 50% 120px;
  }
  .waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
  }
  .waveBottom {
    background-size: 50% 100px;
  }
  .waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
  }
  .login-bottom{
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    span{
      color: #fff;
      font-size: 12px;
    }
  }
</style>
